import { TabBar ,Badge} from 'antd-mobile'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UserOutline,
  } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
const NavTabbar=()=>{
   const nav= useNavigate()
    const tabs = [
        {
          key: '/',
          title: '首页',
          icon: <AppOutline />,
          badge: Badge.dot,
        },
        {
          key: '/chat',
          title: '消息',
          icon: (active) =>
            active ? <MessageFill /> : <MessageOutline />,
          badge: '99+',
        },
        {
          key: '/list',
          title: '列表',
          icon: <UserOutline />,
        },
      ]
    return <div >
       <TabBar onChange={(key)=>nav(key)} style={{
        position: 'fixed',
        left: 0,
        bottom: 0,
        width: '100%',
       }}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </div>
}
export default NavTabbar